<template>
	<view class="container">
		<view class="h2Ttl">我的二维码</view>
		<view class="text01">长按识别图中二维码，加我好友</view>
		<view class="bgImg">
			<image src="@/static/img/bg04.png" style="width: 630rpx; height: 680rpx;" show-menu-by-longpress="true"
				@click="collect()"></image>
			<view class="codeImg">
				<image :src="imgUrl(info.wechat_qrcode)" style="width: 280rpx; height: 280rpx;"></image>
				<text class="text02">懒学青年-{{name}}</text>
			</view>
		</view>
		<view class="logoImg">
			<image src="@/static/img/img19.png" style="width: 264rpx;height:80rpx; "></image>
		</view>
		<view class="telBox" style="display:flex;" @click="tell(info.service_phone)">
			<uv-icon name="phone-fill" color="#fff" size="15" label-color="#fff" labelSize="16"></uv-icon>
			<text style="margin-left:10px;
font-size: 28rpx;
color: #FFFFFF;">客服电话：{{info.service_phone}}</text>
		</view>
	<!-- 	<view class="telBox" style="display:flex;margin-top:10px;" @click="tell(info.service_phone)">
			<uv-icon name="phone-fill" color="#fff" size="15" label-color="#fff" labelSize="16"></uv-icon>
			<text style="margin-left:10px;font-size: 28rpx;
color: #FFFFFF;font-weight:bold;">联系电话：{{info.contact_phone}}</text>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	onLoad(() => {
		get_info()
		get_set()
	});
	const [info,name] = [ref({}),ref()]
	//拨打电话
	const tell = (e) => {
uni.makePhoneCall({
   phoneNumber: e
});	
};
	const get_set = async () => {
		info.value = (await http.get('/api/v1/setting')).data;//获取左侧菜单
	};
	const get_info = async () => {
		name.value  = (await http.get('/api/v1/user/info')).data.name;//获取左侧菜单/获取左侧菜单
	};
	const collect = () => {
		uni.previewImage({
			// 需要预览的图片链接列表。若无需预览，可以注释urls
			urls: [e.target.src],
			// 为当前显示图片的链接/索引值
			current: e.target.src,
			// 图片指示器样式	
			indicator: 'default',
			// 是否可循环预览
			loop: false,
			success: res => {
				console.log('previewImage res', res);
			},
			fail: err => {
				console.log('previewImage err', err);
			}
		});


	};
</script>

<style lang="scss" scoped>
	.container {
		// background-image: url('@/static/img/bgs.png');
		background-repeat: no-repeat;
		padding: 50rpx 60rpx ;
		min-height: 100vh;
		background: #31c0ed;
	}
	.h2Ttl {
		margin-bottom: 30rpx;
		font-weight: bold;
		font-size: 42rpx;
		color: #FFFFFF;
	}
	.text01 {
		margin-bottom: 90rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		color: rgba(255, 255, 255, 1);
	}
	.bgImg {
		margin: 0 auto;
		width: 630rpx;
		height: 600rpx;
		position: relative;
	}
	.bgImg .codeImg {
		position: absolute;
		left: 50%;
		margin-left: -140rpx;
		top: 250rpx;
	}

	.bgImg .text02 {
		margin-top: 15rpx;
		display: block;
		font-weight: bold;
		color: #000000;
		font-size: 28rpx;
		text-align: center;
	}

	.logoImg {
		margin: 130rpx 0 130rpx;
		text-align: center;
	}

	.telBox {
		color: #fff;
		font-size: 32rpx;
		margin: 10rpx auto;
		justify-content: center;
	}

	.txtName {
		text-align: center;
		margin-top: 10rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>